<template>
  <view class="layOut">
    <view class="top">
      <u-icon name="error-circle-fill" color="#FF8041" size="55"></u-icon>
      <view class="msg">将156****8966所绑定的账号注销</view>
      <view class="tip">注意，注销账号后以下信息将被清空且无法找回</view>
    </view>
    <view class="bottom-cont">
      <view class="bottom-con-list">
        <view class="bottom-con-list-item" style="padding-bottom: 36rpx">身份、账户信息、会员及权益信息</view>
        <view class="bottom-con-list-item">交易记录</view>
      </view>
      <view class="bottom-con-list" style="padding-left: 24rpx"> 请确保所有交易已完结且无纠纷，账户删除后的历 史交易可能产生的资金回退权益等将视作自动放弃 </view>
    </view>
    <bottomBtn text="注销账号" :fixed="false" @clickFun="layout" />
    <view class="xy"> 点击注销即代表你已同意<text>《用户注销协议》</text> </view>
  </view>
</template>
<style>
page {
  background: #f9f9f9;
  font-size: 28rpx;
  color: #666666;
}
</style>
<style scoped lang="scss">
.layOut {
  padding: 60rpx 30rpx 0;
  /deep/.u-icon {
    justify-content: center;
  }
  .top {
    text-align: center;
    color: #999999;

    .msg {
      font-size: 36rpx;
      color: #222;
      padding: 46rpx 0 28rpx;
    }
  }
  .bottom-cont {
    background: #fff;
    border-radius: 20rpx;
    padding: 10rpx 32rpx;
    margin: 50rpx 0 56rpx;
    .bottom-con-list {
      padding: 36rpx 0;
      line-height: 45rpx;
      &:first-child {
        border-bottom: 1px solid #f4f4f4;
      }
      .bottom-con-list-item {
        padding-left: 24rpx;
        position: relative;
        &::after {
          content: '';
          display: block;
          width: 8rpx;
          height: 8rpx;
          background-color: #222222;
          position: absolute;
          left: 0;
          top: 16rpx;
          border-radius: 50%;
        }
      }
    }
  }
  .xy {
    text-align: center;
    color: #222222;
    text {
      color: #ff8041;
    }
  }
}
</style>
